Included templates

next13-app-auth-paste-from-root

next13-app-auth-paste-from-root

Adds basic auth.js with Github provider, React provider component and exmaple .env file to TS nextjs13 with app router. Must be paste in root folder, where app/ dir is located.

Pasted files structure

├── app
│   └── api
│       └── auth
│           └── [...nextauth]
│               └── route.ts
└── components
    └── AuthProvider.tsx
├── app
│   └── api
│       └── auth
│           └── [...nextauth]
│               └── route.ts
└── components
    └── AuthProvider.tsx

Files contents

./.env.auth-template
GITHUB_ID=9c7fd0feb8bb492b5082
GITHUB_SECRET=1086b7d5d18b020be74fd00a034a4d19be4380ae
NEXTAUTH_SECRET=LUIt4Y+LigEa/rXhJpbLqloJ2pbHUK271WUV5yLAZyI=
./.env.auth-template
GITHUB_ID=9c7fd0feb8bb492b5082
GITHUB_SECRET=1086b7d5d18b020be74fd00a034a4d19be4380ae
NEXTAUTH_SECRET=LUIt4Y+LigEa/rXhJpbLqloJ2pbHUK271WUV5yLAZyI=
./app/api/auth/[...nextauth]/route.ts
import NextAuth, { AuthOptions } from "next-auth"
import GithubProvider from "next-auth/providers/github"
 
export const authOptions: AuthOptions = {
    // Configure one or more authentication providers
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID!,
            clientSecret: process.env.GITHUB_SECRET!,
        }),
        // ...add more providers here
    ],
}
 
const handler = NextAuth(authOptions)
 
export { handler as GET, handler as POST }
./app/api/auth/[...nextauth]/route.ts
import NextAuth, { AuthOptions } from "next-auth"
import GithubProvider from "next-auth/providers/github"
 
export const authOptions: AuthOptions = {
    // Configure one or more authentication providers
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID!,
            clientSecret: process.env.GITHUB_SECRET!,
        }),
        // ...add more providers here
    ],
}
 
const handler = NextAuth(authOptions)
 
export { handler as GET, handler as POST }
./components/AuthProvider.tsx
'use client'
 
import { SessionProvider } from "next-auth/react";
 
export default function Providers({ children }: { children: React.ReactNode }) {
    return (
        <SessionProvider>
            {children}
        </SessionProvider>
    )
}
./components/AuthProvider.tsx
'use client'
 
import { SessionProvider } from "next-auth/react";
 
export default function Providers({ children }: { children: React.ReactNode }) {
    return (
        <SessionProvider>
            {children}
        </SessionProvider>
    )
}